<template>
  <div class="wrap">
    <!-- 
    model 表单数据对象 object
    rules 表单验证规则 object
    From-Item Attributes
    prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
    rules 	表单验证规则 用户名和密码前面有一个✳️
    -->
    <el-form class="form" ref="ref" :rules="rules" :model="loginForm">
      <el-form-item label="用户名" prop="username">
        <!-- clearable 右边删除按钮 -->
        <el-input v-model="loginForm.username" clearable></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <!-- show-password 小眼睛 显示隐藏密码 -->
        <el-input v-model="loginForm.password" clearable show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { userLogin } from "../request/api.js";
export default {
  data() {
    return {
      loginForm: {
        // 数据双向绑定
        username: "",
        password: "",
      },
      rules: {
        //  rules 	表单验证规则 用户名和密码前面有一个✳️
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 登录点击事件
    login() {
      // console.log(this.$route);
      // return
      // 进行规则验证
      this.$refs.ref.validate((val) => {
        if (val) {
          // 调用接口
          userLogin(this.loginForm).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.msg);
              // 把登录的信息存储到仓库中
              this.$store.dispatch('changeUserInfo',res.list)
              //验证成功之后 跳转到 首页
              this.$router.push("/index");
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
      // this.$router.push("/index");
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
  components: {},
};
</script>
<style scoped lang="less">
.wrap {
  width: 100vw;
  height: 100vh;
  background: #ccc;
  .form {
    width: 400px;
    height: 350px;
    position: absolute;
    left: 450px;
    top: 200px;
    // margin:0 auto;
  }
}
</style>
